<template>
  <div>
    <view-top></view-top>
    <el-container style="width:var(--reader-page-width); margin: 0 auto">
      <el-aside width="62px">
        <div id="side-bar" class="side-bar">
          <dl>
            <dd class="theme-0" @click="goToBook" title="书页">
              <faicon icon="book" size="lg"></faicon>
            </dd>
            <dd class="theme-0" @click="openTOC" title="目录">
              <faicon icon="list" size="lg"></faicon>
            </dd>
            <dd class="theme-0" @click="openConfig" title="设置">
              <faicon icon="cog" size="lg"></faicon>
            </dd>
          </dl>
        </div>
      </el-aside>
      <el-main id="reader-main" >
        <el-container>
          <el-header height="50px" class="reader-header theme-0">
            <el-row class>
              <el-col :span="4" class="reader-prev">
                <a @click="readPrev">
                  <faicon icon="arrow-left"></faicon>
                  <span>上一章</span>
                </a>
              </el-col>
              <el-col :span="16" class="reader-book-title">{{
                book.title
              }}</el-col>
              <el-col :span="4" class="reader-next">
                <a @click="readNext">
                  <span>下一章</span>
                  <faicon icon="arrow-right"></faicon>
                </a>
              </el-col>
            </el-row>
          </el-header>
          <el-main class="reader-main content-box theme-0">
            <el-row>
              <el-col :span="24" class="reader-chapter-title">{{
                chapterTitle
              }}</el-col>
            </el-row>
            <el-row class>
              <el-col :span="24" class="reader-content-pane">
                <p
                  class="reader-content-line"
                  v-for="(item, index) in contentArray"
                  :key="index"
                >{{ item }}
              </p>
              </el-col>
            </el-row>
          </el-main>
          <el-header height="50px" class="reader-header theme-0">
            <el-row class>
              <el-col :span="4" class="reader-prev">
                <a @click="readPrev">
                  <faicon icon="arrow-left"></faicon>
                  <span>上一章</span>
                </a>
              </el-col>
              <el-col :span="16" class="reader-book-title">&nbsp;</el-col>
              <el-col :span="4" class="reader-next">
                <a @click="readNext">
                  <span>下一章</span>
                  <faicon icon="arrow-right"></faicon>
                </a>
              </el-col>
            </el-row>
          </el-header>
        </el-container>
      </el-main>
      <el-dialog
        title="章节目录"
        :visible.sync="tocDialogVisible"
        width="50%"
        center
      >
        <dl class="toc-list">
          <dd
            @click="goByOrder(item.chapterOrder);
              tocDialogVisible = false;
            "
            v-for="item in chapters"
            :key="item.chapterOrder"
          >
            <span>{{ item.title }}</span>
          </dd>
        </dl>
      </el-dialog>
      <el-dialog
        title="页面设置"
        :visible.sync="configDialogVisible"
        width="50%"
        center
      >
        <config @config-done="handleConfig"></config>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import { doCompact } from "../../utils/util/array";
import ViewTop from "../ViewTop.vue";
import Config from "./Config";

export default {
  components: {
    ViewTop,
    Config,
  },
  data() {
    return {
      book: {},
      cid: 1,
      chapterTitle: "",
      chapters: [],
      content: "",
      contentArray:[],
      link: "",
      chapter: {},
      tocDialogVisible: false,
      configDialogVisible: false,
      theme: "theme-0",
      currentConfig: {
        font: "雅黑", // 默认字体
        fontSize: "18px", // 默认字体大小
        pageWidth: "80%", // 默认页面宽度
        theme: "theme-0",
      },
    };
  },
  created() {
    window.addEventListener("scroll", this.handleScroll);
    this.book = JSON.parse(this.$route.query.book);
    this.cid = JSON.parse(this.$route.query.cid);
    this.chapters = JSON.parse(this.$route.query.chapters);
    
    // this.getTOC();
    this.getContent()
  },
  mounted(){
    //添加记录
    // this.handleConfig()
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  beforeRouteUpdate(to, from, next) {
    this.readByOrder(to.query.order);
    next();
  },
  methods: {
    getTOC() {},
    getContent() {
      window.scrollTo({ top: 0, behavior: 'auto' });
      var that=this
      this.axios({
        method: "get",
        url: "/user/chapter/list",
        params: {
          id:that.book.id,
          chapterId:that.cid,
        },
      }).then((res) => {
        if (res.data.code == 1) {
          that.chapterTitle=res.data.data.title
          that.content=res.data.data.content
          that.contentArray=that.content.split(/\n/g)
          // console.log(that.content)
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    readPrev() {
      this.cid = parseInt(this.cid) - 1;
      if (this.cid < 1) {
        this.cid = 1;
        return;
      }
      this.goByOrder(this.cid);
    },
    readNext() {
      
      this.cid = parseInt(this.cid) + 1;
      
      if (this.cid > this.chapters.length){ this.cid = this.chapters.length; return;};
      this.goByOrder(this.cid);
    },
    readByOrder(ord) {
      let item = this.chapters[ord - 1];
      this.cid = item.chapterOrder;
      this.getContent();
    },
    goByOrder(ord) {
      // console.log("going to order:", ord);
      // let item = this.chapters[ord - 1];
      // this.cid = item.chapterOrder;
      this.cid=ord
      this.getContent();
      // this.$router.push({
      //   path: "/reader",
      //   query: {
      //     cid: item.id,
      //     order: item.order,
      //   },
      // });
    },
    goToBook() {
      this.$router.push({
        path: "/book",
        query: {
          book: JSON.stringify(this.book),
        },
      });
    },
    openTOC() {
      this.tocDialogVisible = true;
    },
    openConfig() {
      this.configDialogVisible = true;
    },
    handleConfig(configRes) {
      if (configRes.save) {
        console.log(configRes.configs);
        let cfg = configRes.configs;
        this.currentConfig= cfg;
        if (this.theme != cfg.theme) {
          // 切换主题
          this.changeTheme(this.theme, cfg.theme);
          this.theme = cfg.theme;
        }
        
        // 根据 currentConfig 更新样式
      document.documentElement.style.setProperty("--reader-font-family", this.currentConfig.font);
      document.documentElement.style.setProperty("--reader-font-size", this.currentConfig.fontSize+"px");
      document.documentElement.style.setProperty("--reader-page-width", this.currentConfig.pageWidth+"%");
       
      } else {
        console.log("config cancelled");
      }
      this.configDialogVisible = false;
    },
    changeTheme(from, to) {
      var eles = document.getElementsByClassName(from);
      while (eles.length) {
        var classNames = eles[0].className;
        eles[0].className = classNames.replace(from, to);
      }
    },
    handleScroll() {
      var scrollHeight = document.scrollingElement.scrollTop;
      var el = document.getElementById("side-bar");
      if (scrollHeight < 100) {
        el.style.top = 80 - scrollHeight + "px";
      } else {
        el.style.top = "-20px";
      }
    },
  },
};
</script>


<style lang="stylus" scoped>
bgColor = #e9e6d0;
bdColor = #cab389;
bgHlColor = #faf7e1;
bgColor0 = #e9e6d0;
bgColor1 = #f7edd4;
bgColor2 = #eaf4e9;
bgColor3 = #e9f4f6;
bgColor4 = #f7e9e8;
bgColor5 = #e6e6e6;
:root {
  --reader-font-family: "雅黑";
  --reader-font-size: 18px;
  --reader-page-width: 80%;
}



.theme-0 {
  background-color: bgColor0;
}

.theme-1 {
  background-color: bgColor1;
}

.theme-2 {
  background-color: bgColor2;
}

.theme-3 {
  background-color: bgColor3;
}

.theme-4 {
  background-color: bgColor4;
}

.theme-5 {
  background-color: bgColor5;
}

.side-bar {
  position: fixed;

  dl {
    border: 1px solid bdColor;
    border-bottom: 0;

    dd {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      cursor: pointer;
      border-bottom: 1px solid bdColor;
      margin: 0 auto;

      &:hover {
        background-color: bgHlColor;
        color: #999;
      }
    }
  }
}

.reader-header {
  border: 1px solid bdColor;
  line-height: 50px;
}

.content-box {
  border: 1px solid bdColor;
  padding: 20px;
}

.reader-main {
  margin-top: 10px;
}

.reader-title {
  text-align: right;
  font-weight: bold;
  font-size: 20px;
}

.reader-book-title {
  text-align: center;
  font-size: 18px;
}

.reader-chapter-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.reader-content-pane {
  padding: 10px;
}

.reader-content-line {
  text-indent: 3.2rem;
  line-height: 3.2rem;
  text-align: left
  font-family: var(--reader-font-family);
  width: 100%;
  font-size: var(--reader-font-size);
}

.reader-prev {
  text-align: left;
  cursor: pointer;

  span {
    margin-left: 5px;
  }
}

.reader-next {
  text-align: right;
  cursor: pointer;

  span {
    margin-right: 5px;
  }
}

.toc-popper {
  width: 800px;
  background-color: bgColor;
}

.toc-list {
  overflow-y: scroll;
  max-height: 600px;

  dd {
    border-bottom: 1px solid #eee;
    line-height: 40px;
    height: 40px;
    padding: 0 20px;
    cursor: pointer;

    &:hover {
      color: #999;
      background-color: #eee;
    }
  }
}
</style>

